<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <%@ include file="../../static/head.jsp" %>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<style>
    .error {
        color: red;
    }

    .myContainer {
        padding: 8px;
    }

    .searchDiv {
        padding-left: 10px;
        padding-top: 24px;
        background: #fff;
        border-radius: 6px;
    }

    .dataTableDiv {
        margin-top: 8px;
        margin-bottom: 8px;
        padding: 4px;
        border-radius: 6px;
    }

    .paginationDiv {
        padding: 14px 10px;
        background: #fff;
        border-radius: 6px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .el-table .warning-row {
        background: #f39c12;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }
</style>
<body>
<!-- Pre Loader -->
<div class="loading">
    <div class="spinner">
        <div class="double-bounce1"></div>
        <div class="double-bounce2"></div>
    </div>
</div>
<!--/Pre Loader -->
<div class="wrapper">
    <!-- Page Content -->
    <div id="content">
        <!-- Top Navigation -->
        <%@ include file="../../static/topNav.jsp" %>
        <!-- Menu -->
        <div class="container menu-nav">
            <nav class="navbar navbar-expand-lg lochana-bg text-white">
                <button class="navbar-toggler" type="button" data-toggle="collapse"
                        data-target="#navbarSupportedContent"
                        aria-controls="navbarSupportedContent" aria-expanded="false"
                        aria-label="Toggle navigation">
                    <span class="ti-menu text-white"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <!-- <div class="z-navbar-nav-title">$template2.back.menu.title.text</div> -->
                    <ul id="navUl" class="navbar-nav mr-auto">

                    </ul>
                </div>
            </nav>
        </div>
        <!-- /Menu -->
        <!-- Breadcrumb -->
        <!-- Page Title -->
        <div class="container mt-0">
            <div class="row breadcrumb-bar">
                <div class="col-md-6">
                    <h3 class="block-title">学生签到管理</h3>
                </div>
                <div class="col-md-6">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item">
                            <a href="${pageContext.request.contextPath}/index.jsp">
                                <span class="ti-home"></span>
                            </a>
                        </li>
                        <li class="breadcrumb-item"><span>学生签到任务管理</span></li>
                        <li class="breadcrumb-item active"><span>学生签到任务列表</span></li>
                    </ol>
                </div>
            </div>
        </div>
        <!-- /Page Title -->

        <!-- /Breadcrumb -->
        <!-- Main Content -->
        <div class="container" id="signTaskListApp">
            <!-- myContainer start -->
            <div class="myContainer">
                <div class="searchDiv">
                    <el-form :inline="true" class="demo-form-inline">
                        <el-form-item label="教师">
                            <el-select v-model="teacherId" placeholder="请选择签到发起人">
                                <el-option label="选择教师进行筛选" value=""></el-option>
                                <el-option v-for="item in teacherList"
                                           :label="item.label"
                                           :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="签到时间">
                            <el-date-picker
                                    v-model="value2"
                                    type="datetimerange"
                                    :picker-options="pickerOptions"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    align="right">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="searchSignTaskList">查询</el-button>
                            <el-button @click="addSignTaskPage">添加签到任务</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <!-- 数据表格 start -->
                <div class="dataTableDiv">
                    <el-table
                            :data="tableData"
                            border
                            style="width: 100%">
                        <el-table-column
                                prop="taskDes"
                                label="签到任务名称">
                        </el-table-column>
                        <el-table-column
                                prop="teacherName"
                                label="教师姓名"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="endTime"
                                label="结束时间"
                                width="180">
                        </el-table-column>

                        <el-table-column
                                prop="signNumber"
                                label="已签到人数"
                                align="center"
                                header-align="center"
                                width="110">
                        </el-table-column>

                        <el-table-column
                                prop="totalNumber"
                                align="center"
                                header-align="center"
                                label="签到总人数"
                                width="110">
                        </el-table-column>
                        <el-table-column label="签到状态" align="center" width="100">
                            <template slot-scope="scope">
                                <div v-if="getSignTaskStatus(scope.row) == 0">
                                    <i class="el-icon-loading" style="color: #2a8a15;"></i>
                                    <span>正在签到</span>
                                </div>
                                <div v-else-if="getSignTaskStatus(scope.row) == 1">
                                    <i class="el-icon-bell"></i>
                                    <span>未开始</span>
                                </div>
                                <div v-else>
                                    <i class="el-icon-warning" style="color: red;"></i>
                                    <span>已结束</span>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button icon="el-icon-view" circle
                                           :disabled="getSignTaskStatus(scope.row) == 1"
                                           @click="checkSignTaskDetail(scope.row.id)"></el-button>
                                <el-button type="primary" icon="el-icon-edit" circle
                                           :disabled="getSignTaskStatus(scope.row) != 1"
                                           @click="modifySignTask(scope.row.id)"></el-button>
                                <el-button type="danger" icon="el-icon-delete" circle
                                           @click="deleteSignTask(scope.row.id)"></el-button>
                            </template>
                            　　
                        </el-table-column>
                    </el-table>
                </div>
                <!-- 数据表格 end -->
                <!-- 分页 start -->
                <div class="paginationDiv">
                    <div>
                        <el-select v-model="pageSize" size="mini">
                            <el-option label="10" value="10"></el-option>
                            <el-option label="15" value="15"></el-option>
                            <el-option label="20" value="20"></el-option>
                            <el-option label="50" value="50"></el-option>
                        </el-select> &nbsp;条每页
                    </div>
                    <div>共{{totalPage}}页，{{totalCount}}条记录</div>
                    <div>
                        <el-button-group>
                            <el-button type="primary" icon="el-icon-arrow-left" :disabled="pageIndex == 1"
                                       @click="pageIndex -= 1">上一页
                            </el-button>
                            <el-button type="primary" :disabled="pageIndex == totalPage" @click="pageIndex += 1">下一页
                                <i class="el-icon-arrow-right el-icon--right"></i>
                            </el-button>
                        </el-button-group>
                    </div>
                </div>
                <!-- 分页 start -->
                <el-dialog title="签到情况" :visible.sync="dialogTableVisible"
                           :close-on-press-escape="false"
                           :efore-close="closeDialogTableFun">
                    <el-table :data="checkInData" :row-class-name="tableRowClassName">
                        <el-table-column property="studentId" label="学号" width="150"></el-table-column>
                        <el-table-column property="name" label="姓名" width="200"></el-table-column>
                        <el-table-column label="签到状态" align="center" width="100">
                            <template slot-scope="scope">
                                <!-- 已签到 -->
                                <div v-if="getSignTaskSignStatus(scope.row)">
                                    <i class="el-icon-success" style="color: #2a8a15;"></i>
                                </div>
                                <!-- 未签到 -->
                                <div v-else>
                                    <i class="el-icon-warning" style="color: red;"></i>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column property="signTime" label="签到时间"></el-table-column>
                    </el-table>
                </el-dialog>
            </div>
            <!-- myContainer end -->
        </div>
        <!-- /Main Content -->
    </div>
    <!-- /Page Content -->
</div>
<!-- Back to Top -->
<a id="back-to-top" href="#" class="back-to-top"> <span
        class="ti-angle-up"></span>
</a>
<!-- /Back to Top -->
<%@ include file="../../static/foot.jsp" %>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
<!-- axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 引入element-ui组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>

    <%@ include file="../../utils/menu.jsp"%>

    <%@ include file="../../static/setMenu.js"%>

    <%@ include file="../../utils/baseUrl.jsp"%>
    <%@ include file="../../static/md5.js"%>

    const signTaskListApp = new Vue({
        el: '#signTaskListApp',
        data() {
            return {
                tableData: [],
                // 搜索教师的编号
                teacherId: '',
                // 分页大小
                pageSize: 10,
                // 当前页码
                pageIndex: 1,
                // 总页数
                totalPage: 1,
                // 总条数
                totalCount: 0,
                // 开始时间
                startTime: '',
                // 结束时间
                endTime: '',
                teacherList: [],
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                value2: '',
                checkInData: [
                    {
                        // 学号
                        studentId: '2020023797',
                        // 姓名
                        name: '董伟',
                        // 是否签到
                        signStatus: 0,
                        // 签到时间
                        signTime: '',
                    }, {
                        // 学号
                        studentId: '2020023797',
                        // 姓名
                        name: '董伟2',
                        // 是否签到
                        signStatus: 1,
                        // 签到时间
                        signTime: '2022-02-02 12:12:12',
                    },
                ],
                dialogTableVisible: false,
            }
        },
        methods: {
            tableRowClassName({row, rowIndex}) {
                if (row.signStatus === 1) {
                    return 'success-row';
                } else {
                    return 'warning-row';
                }
            },
            addSignTaskPage: function () {
                window.location.href = "${pageContext.request.contextPath}/jsp/modules/xueshengqiandao/add.jsp";
            },
            // 获取任务列表
            searchSignTaskList() {
                const _this = this;
                this.tableData = [];
                // 组装请求参数
                let params = {
                    pageIndex: this.pageIndex,
                    pageSize: this.pageSize,
                };
                if (this.teacherId) {
                    console.debug("teacherId:" + this.teacherId);
                    params.teacherId = this.teacherId;
                }
                if (this.value2) {
                    console.debug("value2:" + this.value2);
                    params.startTime = this.value2[0];
                    params.endTime = this.value2[1];
                }
                // 开始发送请求
                axios({
                    url: '/jspmk28g8/signTask/pageList',
                    method: 'GET',
                    params: params,
                    headers: {
                        'Content-Type': 'application/json;charset=UTF-8',
                        'token': window.sessionStorage.getItem('token')
                    }
                }).then(function (res) {
                    const {code, data} = res.data;
                    if (code === 200) {
                        _this.tableData = data.records;
                        _this.totalPage = data.pages;
                        _this.totalCount = data.total;
                    }
                }).catch(function (error) {
                    console.error(error);
                });
            },
            modifySignTask: function (id) {
                console.debug("modifySignTask id:" + id);
                window.sessionStorage.setItem('modifySignTask', id);
                window.location.href = "${pageContext.request.contextPath}/jsp/modules/xueshengqiandao/modify.jsp";
            },
            // 删除任务
            deleteSignTask: function (id) {
                const _this = this;
                console.debug("delete id:" + id);
                this.$confirm('此操作将永久删除该签到记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios({
                        url: '/jspmk28g8/signTask/deleteSignTask',
                        method: 'DELETE',
                        headers: {
                            'Content-Type': 'application/json;charset=UTF-8',
                            'token': window.sessionStorage.getItem('token')
                        },
                        params: {
                            id: id
                        }
                    }).then(function (res) {
                        const {code} = res.data
                        if (code === 200) {
                            _this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            _this.searchSignTaskList();
                        }
                    }).catch(function (error) {
                        console.error(error);
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            // 查看任务详情
            checkSignTaskDetail: function (id) {
                console.debug("check id:" + id);
                const _this = this;
                this.checkInData = [];
                // 发送请求
                axios({
                    url: '/jspmk28g8/signTask/getSignDetail',
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json;charset=UTF-8',
                        'token': window.sessionStorage.getItem('token')
                    },
                    params: {
                        id: id
                    }
                }).then(function (res) {
                    console.debug(res)
                    const {code, data} = res.data;
                    if (code === 200) {
                        _this.checkInData = data;
                        _this.dialogTableVisible = true;
                    }
                }).catch(function (error) {
                    console.error(error);
                });
            },
            getSignTaskStatus: function (row) {
                const today = new Date();
                const start = new Date(row.startTime.replace("-", "/").replace("-", "/"));
                const end = new Date(row.endTime.replace("-", "/").replace("-", "/"));

                if (end < today) {  // 已过期
                    return 2;
                } else if (start > today) { // 未开始
                    return 1;
                } else { // 进行中
                    return 0;
                }
            },
            getSignTaskSignStatus: function (row) {
                return row.signStatus === 1
            },
            closeDialogTableFun: function () {
                console.debug("滚逼")
            }
        },
        watch: {
            // 每页显示的数量发生变化，重新获取数据
            pageSize: function (newVal, oldVal) {
                this.searchSignTaskList();
            },
            pageIndex: function (newVal, oldVal) {
                this.searchSignTaskList();
            },
        },
        mounted() {
            const _this = this;
            // 获取签到发起人 -教师列表
            axios({
                url: '/jspmk28g8/jiaoshi/lists',
                method: 'get',
                headers: {
                    'Content-Type': 'application/json;charset=UTF-8',
                    'token': window.sessionStorage.getItem('token')
                }
            }).then(function (response) {
                // 处理成功情况
                const {code, data} = response.data;
                if (code === 0) {
                    _this.teacherList = []
                    data.forEach(function (item) {
                        _this.teacherList.push({
                            value: item.id,
                            label: item.jiaoshixingming
                        })
                    })
                }
            }).catch(function (error) {
                // 处理错误情况
                console.debug(error);
            }).then(function () {
                // 总是会执行
            });
            // 获取签到任务列表
            this.searchSignTaskList();
        },
        computed: {},
    })


    $(document).ready(function () {
        $('.dropdown-menu h5').html(window.sessionStorage.getItem('username') + '(' + window.sessionStorage.getItem('role') + ')')
        //设置导航栏菜单
        setMenu();
        <%@ include file="../../static/myInfo.js"%>
    });
    // 用户登出
    <%@ include file="../../static/logout.jsp"%>

</script>
</body>

</html>